/*
 This file 'MenuButton' is part of Firebird Integrated Solution 1.0

 Copyright (c) 2014 Lincong

 Contact:
 Email: lincong1987@gmail.com

 QQ: 159257119

 See Usage at http://www.jplatformx.com/firebird

 Create date: 2014-06-19 15:48
 */

define(function (require, exports, module) {

    require("Firebird.ui.Component");
    require("Firebird.lang.HashMap");
    /**
     * @class Firebird.ui.MenuButton
     */
    Firebird.define("Firebird.ui.MenuButton", {
        extend: "Firebird.ui.Component",
        statics: {
            _uuid: 1,
            uuid: function () {
                return this._uuid++;
            },
            attrs: function ($component) {
                var attrs = {};
                attrs = $.extend({}, {
                    renderTo: $component.get(0),
                    instanceId: $component.attr("fb-instance") || $component.attr("name") || $component.attr("id") || ("menubutton_" + Firebird.ui.MenuButton.uuid()),

                    disabled: Firebird.ui.Component.eval($component.attr("fb-disabled")),
                    icons: Firebird.ui.Component.eval($component.attr("fb-icons")),
                    label: $component.attr("fb-label") || "",
                    text: Firebird.ui.Component.eval($component.attr("fb-text") || "true"),
                    hidden: Firebird.ui.Component.eval($component.attr("fb-hidden")),
                    width: Firebird.ui.Component.eval($component.attr("fb-width")),

                    data: Firebird.ui.Component.eval($component.attr("fb-data")),
                    url: Firebird.ui.Component.eval($component.attr("fb-url")),
                    cache: Firebird.ui.Component.eval($component.attr("fb-cache"))

                });
                return attrs;
            }
        },
        config: {
            renderTo: null,
            instanceId: null,
            disabled: false,
            icons: {},
            label: "",
            text: true,
            hidden: false,
            width: 150,

            data: [],
            url: "",
            cache: ""
        },

        instance: null,

        _isActive: false,

        _init: function () {
            var me = this;
            var renderTo = me.renderTo = $(me.getRenderTo());
            me.instance = renderTo.data({
                instance: me,
                xtype: "menubutton"
            });

            me.instance.button({});

            me.menuStack = new Firebird.lang.HashMap();
            me.render();

            me.setLabel(me.getLabel());
            me.setText(me.getText());
            me.setDisabled(me.getDisabled());
            me.setIcons(me.getIcons() || {});
            me.setHidden(me.getHidden());
            me.setWidth(me.getWidth());
        },

        render: function () {

            var me = this;
            me.picker = $("<div class='ui-button-menu'><ul></ul></div>");
            me.picker.data("instance", me);
            me.instance.data("menubutton-wrapper", me.picker);
            $.each(me.getData() || [], function (i, n) {
                me.menuStack.put(n.id, n);
            });

            var menuRender = Firebird.Tmpl.compile("<li>" +
				"<a data-id='{{id}}' href='javascript:;'>{{label}}</a>" +
				"</li>");
            me.menuStack.each(function (k, v) {
                var menu = $(menuRender(v));
                me.menuStack.get(k)["menu"] = menu;
                me.picker.find("ul").append(menu);
                menu.on("click", function () {
                    me.instance.trigger("onClick", v);
                    me.hideMenu();
                }).on("mouseover", function () {
                    $(this).addClass("hover").siblings().removeClass("hover");
                }).on("mouseout", function () {
                    $(this).removeClass("hover");
                });
            });

            $("body").append(me.picker);

            me.on("click", function () {
                if (me._isActive === true) {
                    me.hideMenu();
                } else {
                    me.showMenu();
                }
            });

            $(document).on("click", function (e) {
                var $target = $(e.target);
                var $button = $target.closest(".ui-button");
                if($button.is(me.instance)){
                    return;
                }
                var $wrapper = $button.data("menubutton-wrapper");
                if (typeof $wrapper != "undefined" && $wrapper.length > 0) {
                    $(".ui-button-menu").not($wrapper).each(function () {
                        $(this).data("instance").hideMenu();
                    });
                } else {
                    $(".ui-button-menu").each(function () {
                        $(this).data("instance").hideMenu();
                    });
                }
            });
        },

        /**
         * 显示下拉菜单
         */
        showMenu: function () {

            var offset = this.instance.offset();

            this._isActive = true;
            this.picker.css({
                position: "absolute",
                zIndex: Firebird.ui.Component.getZIndex(),
                top: offset.top + this.instance.height(),
                left: offset.left
            }).slideDown(300);
            this.instance.trigger("onShowMenu");
        },

        hideMenu: function () {
            this._isActive = false;
            this.picker.slideUp(200);
            this.instance.trigger("onHideMenu");
        },

        trigger: function (e) {
            this.instance.trigger.apply(this.instance, arguments);
        },

        on: function () {
            this.instance.on.apply(this.instance, arguments);
        },

        applyDisabled: function (status) {
            this.instance && this.instance.button("option", "disabled", status);
            return status;
        },

        applyIcons: function (icons) {
            this.instance && this.instance.button("option", "icons", icons);
            return icons;
        },

        applyLabel: function (label) {
            this.instance && this.instance.button("option", "label", label);
            return label;
        },

        applyWidth: function (width) {
            this.picker && this.picker.width(width);
            return width;
        },

        applyText: function (text) {
            this.instance && this.instance.button("option", "text", text);
            return text;
        },

        applyHidden: function (status) {
            if (this.instance) {
                var status = !!status;
                this.instance.css({display: status ? "none" : ""});
            }
            return status;
        },

        destroy: function () {
            this.instance.button("destroy");
        },
        option: function (key, value) {
            if (typeof key == "undefined" && typeof value == "undefined") {
                return this.instance.button("option");
            }
            if (typeof value == "undefined") {
                return this.instance.button("option", key);
            }
            return this;
        },
        refresh: function () {

        },
        widget: function () {

        },
        getValue: function () {
            return this.getLabel();
        },
        setValue: function (value) {
            this.setLabel(value);
        }
    });

    module.exports = Firebird.ui.Button;

});